<template>
<div class="tag" @longpress='() =>{switchDel()}' @tap='into'>
    
    <span class="status-tip" :style="{'background-color': statusColor}"></span>
    
    <div class="content" :class='showDel ? "showDel" : ""'>
        <h1 class="summary">
            {{tagData.summary}}
        </h1>
        <span class="time">
            {{time}}
        </span>

    </div>
    
    <div class="del" @tap.stop='del'>
        <i-icon :type='icon.type' :size='icon.size'/>
    </div>         
    
</div>
</template>

<script>
import getStatus from '@/utils/tagStatus.js'

export default {

    props: ['tagData'],

    computed: {

        statusColor(){
            this.status = getStatus(this.tagData.status);
            return this.status.color;
        },

        time(){
            let createTime = new Date(this.tagData.createTime);
            return this.formTime(createTime);
        },

    },
    
    data: function() {	
        return {
            icon: {
                size: 28,
                type: 'trash',
            },
            status:{},
            showDel: false,
        }
    },
    
    
    methods: {
        
        switchDel(status){
            this.showDel = status !== undefined ? status : !this.showDel;
        },
        
        del(){
            this.$emit("del", this.tagData.id);
            this.switchDel(false);
        },

        into(){
            this.$emit('tap', this.tagData.id);
            this.switchDel(false);
        },

        formTime(time){
            let date = new Date(time);
            let year = date.getFullYear(),
                month = date.getMonth(),
                day = date.getDate(),
                hours = date.getHours(),
                minutes = date.getMinutes(),
                seconds = date.getSeconds();

            return `${month+1}月${day}日 ${hours}:${minutes}分`
        }
    },
}
</script>

<style scoped lang='less'>

.tag{
    & + &{
        margin-top: 3*@interval;
    }
    
    overflow: hidden;
    display: flex;
    justify-content: left;
    align-items: stretch;
    position: relative;
    padding:  2*@interval 2*@interval 2*@interval 3*@interval;
    border-radius: 6rpx;
    box-shadow: 0 6rpx 10rpx 6rpx rgba(126, 126, 126, 0.1);
    background: #fff;

    .content{
        flex: 0 0 100%;
        
        transition: all .5s;
        box-sizing: border-box;
        &.showDel{
            flex: 1 1;
        }
    }

    .content,
    .summary{
        width: 100%;
    }
    
    .time{
        .fontSize_small();    
        color: @darkColor;
    }

    .del{
        @size: 90rpx;
        flex: 0 0 @size;
        margin-left: 20rpx;
        width: @size;
        height: @size;
        line-height: @size;
        border-radius: 100%;
        background: @grayColor;
        box-sizing: border-box;
        text-align: center;
        color: @darkColor;
    }
}
.status-tip{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 10rpx;
    height: 100%;
}

</style>